{{#contentFor "Styles"}}
    <style type="text/css">
        .row{
            margin-left: -8px;
            margin-right: -8px;
        }

        .col-l,
        .col-r {
            width: 47%;
            float: left;
            display: inline-block;
        }

        .col-m {
            width: 6%;
            float: left;
            padding-left: 5px;
            display:inline-block;
            margin-top: 65px;
        }
    
        .col-m>button {
            display: block;
            margin-bottom: 8px;
        }
    </style>
{{/contentFor}}
{{#contentFor "Scripts"}}
    <script type="text/javascript" src="/Scripts/clipboard.min.js"></script>
    <script type="text/javascript">
        $('#rtMd5Source').mouseenter(function(){
            if($(this).val()){
                this.select();
                $(this).focus();
            }
        });
        
        // 复制操作
        $('[action=copy]').bind('click', function(){
            var clipboard = new Clipboard(this);

            clipboard.on('success', function (e) {
                layer.msg('已复制到剪切板！', { time: 4000 });
            });
        });

        $('#btnCryptoMd5').bind('click', function(){
            var lindex = layer.load();

            $.ajax({
                type: 'post',
                cache: false,
                url: '/api/crypto/md5',
                headers:{
                    'content-type':'text/plain'
                },
                data: $('#rtMd5Source').val(),
                dataType: 'json',
                success: function(rs){
                    $('#rtMd5Target').val(rs.result);
                },
                complete: function(){
                    layer.close(lindex);
                }
            });
        });
    </script>
{{/contentFor}}
<div class="card card-primary">
    <div class="card-header">MD5加密</div>
    <div class="card-body">
        <div class="row">
            <div class="col-l">
                <textarea id="rtMd5Source" class="form-control" cols="30" rows="10"></textarea>
            </div>
            <div class="col-m">
                <button id="btnCryptoMd5" class="btn btn-primary">
                    <i class="bi bi-chevron-right"></i> 加密
                </button>
                <button id="btnCopyMd5" action="copy" class="btn btn-secondary" data-clipboard-action="copy" data-clipboard-target="#rtMd5Target">
                    <i class="bi bi-clipboard-data"></i> 复制
                </button>
            </div>
            <div class="col-r">
                <textarea id="rtMd5Target" class="form-control" cols="30" rows="10" readonly></textarea>
            </div>
        </div>
    </div>
</div>